<template>
<div>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
     v-dialogDrag
    :visible.sync="visible">
    <el-form :model="inputForm" size="small" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
             label-width="120px">
      <el-row  :gutter="15">
        <el-col :span="12">
            <el-form-item label="票名称" prop="ticketName"
                :rules="[
                 ]">
              <el-input v-model="inputForm.ticketName" placeholder="请填写票名称"     ></el-input>
           </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
            <el-form-item label="举办年限" prop="ticketTime"
                :rules="[
                 ]">
              <el-input v-model="inputForm.ticketTime" placeholder="请填写举办年限"     ></el-input>
           </el-form-item>
        </el-col> -->
        <el-col :span="12">
            <el-form-item label="是否关闭" prop="ticketClose"
                :rules="[
                 ]">
              <!-- <el-input v-model="inputForm.ticketClose" placeholder="请填写是否关闭"     ></el-input> -->
              <el-select v-model="inputForm.ticketClose" disabled="" placeholder="请填写是否关闭" style="width:100%;" >
                <el-option v-for="item in ticketCloseArr" :label="item.name" :value="item.value" :key="item.value"></el-option>
              </el-select>
           </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
            <el-form-item label="编号" prop="ticketCode"
                :rules="[
                 ]">
              <el-input v-model="inputForm.ticketCode" placeholder="请填写编号"     ></el-input>
           </el-form-item>
        </el-col> -->
        <el-col :span="12">
            <el-form-item label="票类型" prop="ticketClass"
                :rules="[
                 ]">
              <el-select v-model="inputForm.ticketClass" placeholder="请填写票类型" style="width:100%;" >
                <el-option v-for="item in ticketClassArr" :label="item" :value="item" :key="item"></el-option>
              </el-select>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="绑定值" prop="bindValue"
                :rules="[
                 ]">
              <!-- <el-input v-model="inputForm.bindValue" placeholder="请填写绑定值"     ></el-input> -->
              <el-checkbox-group v-model="bindValue">
                <el-checkbox-button v-for="item in bindValueArr" :label="item" :key="item">{{item}}</el-checkbox-button>
              </el-checkbox-group>
              <!-- <el-select v-model="inputForm.bindValue" placeholder="请填写绑定值" style="width:100%;" >
                <el-option v-for="item in ticketClassArr" :label="item" :value="item" :key="item"></el-option>
              </el-select> -->
           </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
            <el-form-item label="排序" prop="sort"
                :rules="[
                 ]">
              <el-input v-model="inputForm.sort" placeholder="请填写排序"     ></el-input>
           </el-form-item>
        </el-col> -->
        <el-col :span="12">
            <el-form-item label="备注信息" prop="remarks"
                :rules="[
                 ]">
          <el-input type="textarea" v-model="inputForm.remarks" placeholder="请填写备注信息"     ></el-input>
           </el-form-item>
        </el-col>
        </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="visible = false">关闭</el-button>
      <el-button size="small" type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        ticketClassArr: ['人员', '单位'],
        bindValueArr: [],
        ticketCloseArr: [
          {
            name: '是',
            value: '1'
          },
          {
            name: '否',
            value: '0'
          }
        ],
        bindValue: [],
        inputForm: {
          id: '',
          ticketName: '',
          ticketTime: '',
          ticketClose: '1',
          ticketCode: '',
          ticketClass: '',
          bindValue: '',
          sort: '',
          remarks: ''
        },
        state: 0
      }
    },
    watch: {
      'inputForm.ticketClass': {
        handler (newVal) {
          this.bindValueArr = []
          if ((this.method === 'edit' || this.method === 'view') && newVal !== '') {
            if (this.state === 0) {
              this.state = 1
            } else {
              this.bindValue = []
            }
          } else {
            this.bindValue = []
          }
          if (newVal === '人员') {
            this.$http({
              url: '/basicdata/basicjob/basicJob/list',
              method: 'get',
              params: {
                'pageNo': 1,
                'pageSize': 9999
              }
            }).then(({data}) => {
              if (data && data.success) {
                for (let i in data.page.list) {
                  this.bindValueArr.push(data.page.list[i].jobClass)
                }
              }
            })
          } else if (newVal === '单位') {
            this.$http({
              url: '/basicdata/basicunitlevel/basicUnitLevel/list',
              method: 'get',
              params: {
                'pageNo': 1,
                'pageSize': 9999
              }
            }).then(({data}) => {
              if (data && data.success) {
                for (let i in data.page.list) {
                  this.bindValueArr.push(data.page.list[i].unitLevel)
                }
              }
            })
          }
        }
      }
    },
    components: {
    },
    methods: {
      init (method, id, ticketTime) {
        this.method = method
        this.inputForm.id = id
        this.inputForm.ticketTime = ticketTime
        this.state = 0
        if (method === 'add') {
          this.title = `新建投票实体`
        } else if (method === 'edit') {
          this.title = '修改投票实体'
        } else if (method === 'view') {
          this.title = '查看投票实体'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.$http({
              url: `/basicdata/basicvote/basicVote/queryById?id=${this.inputForm.id}`,
              method: 'get'
            }).then(({data}) => {
              this.bindValue = []
              this.inputForm = this.recover(this.inputForm, data.basicVote)
              for (let i in this.inputForm.bindValue.split(',')) {
               if (this.inputForm.bindValue.split(',')[i] !== '') {
                 this.bindValue.push(this.inputForm.bindValue.split(',')[i])
               }
              }
              this.loading = false
            })
          }
        })
      },
      // 表单提交
      doSubmit () {
        this.inputForm.bindValue = ''
        for (let i in this.bindValue) {
          if (i === '0') {
            this.inputForm.bindValue += this.bindValue[i]
          } else {
            this.inputForm.bindValue += ',' + this.bindValue[i]
          }
        }
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$http({
              url: `/basicdata/basicvote/basicVote/save`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              this.loading = false
              if (data && data.success) {
                this.visible = false
                this.$message.success(data.msg)
                this.$emit('refreshDataList')
              }
            })
          }
        })
      }
    }
  }
</script>
